<template>
  <div>
    <h3>child</h3>
    <h5>{{ msg }}</h5>
    <button @click="passMsg">揍你</button>
    <p>{{ this.$parent.parentData }}</p>
    <p>{{ appMsg }}</p>
    <button @click="toApp">给App传值</button>
    <p>
      数量：<span style="color: red">{{ count }}</span>
    </p>
    <button @click="increase">增加</button>
    <button @click="decrease">减少</button>
    <button @click="delayAdd">异步增加</button>
    <button @click="add">异步增加add</button>
    <button @click="delayDec">异步减少</button>
    <br>
    <p>数量N：<span style="color: red">{{ countN }}</span></p>
    <button @click="increaseByN(3)">增加N</button>
    <button @click="decreaseByN(3)">减少N</button>
  </div>
</template>

<script>
import bus from "../utils/bus";
import { mapState, mapMutations,mapActions } from "vuex";
export default {
  computed: {
    /* count() {
            return this.$store.state.count 
        }, */
   /*  ...mapState({
      count: "count",
      countN:'countN'
    }), */
    // ...mapState(["count","countN"]),
    ...mapState({
      count:state=>state.countStore.count,
      countN:state=>state.countStore.countN,

    })
  },
  props: {
    msg: {
      type: String,
      default: "",
    },
  },
  methods: {
    // 使用辅助函数方式
    ...mapMutations(["increase", "decrease","increaseByN","decreaseByN"]),
    ...mapActions(["delayAdd","delayDec"]),
    
    passMsg() {
      this.$emit("showMsg", "I am form child");
    },
    toApp() {
      this.$emit("toApp", "这是从child传递给app的消息");
    },
    /* add() {
        // 触发mutations
      this.$store.commit("addCount");
    }, 
    add(n){
        this.$store.commit("increaseByN",n);
    },*/
    add(){
        // 触发Actions
        // this.$store.dispatch('delayAdd')
        this.delayAdd()
    },
    
  },
  data() {
    return {
      childMsg: "childMsg",
      appMsg: "childAppMsg",
    };
  },
  mounted() {
    console.log(this.$parent.parentData);
    bus.$on("appClick", (val) => {
      this.appMsg = val;
    });
    console.log("attrs", this.$attrs);
  },
};
</script>

<style></style>
